<template>
	<view class="detail_sale" :style="'padding:' + mydata.padding.top + 'px 0 ' + mydata.padding.bottom + 'px 0'">
		<view class="containers" :style="'background:' + mydata.color.bg + '; color:' + mydata.color.text">
			<view v-if="mydata.couponlist && mydata.couponlist.length > 0 && addons.indexOf(3)" class="sale_item van-hairline--bottom" @click="showtype('coupon')">
				<view class="label" :style="titlestyle">领券</view>
				<view class="body body-coupon">
					<view class="coupons">
						<view v-for="(item, i) in mydata.couponlist" :key="i" class="coupon" :style="'background:' + mydata.color.coupon + '; border-color:' + mydata.color.coupon">
							满{{ item.conditions }}元减{{ item.denomination }}元
							<text class="after" :style="'border-color:' + mydata.color.coupon"></text>
						</view>
					</view>
				</view>
				<text class="iconfont el-sc-gengduo" style="color: rgb(150, 150, 150);"></text>
			</view>
			<view class="sale_item van-hairline--bottom">
				<view class="label" :style="titlestyle">活动</view>
				<view class="body">
					<view class="actives">
						<view class="active" v-if="details && details.integral_deduction != 0">
							<text class="icon-word" :style="activelabel"><text>积分</text></text>
							<text class="demon"><text>支持积分抵扣</text></text>
						</view>
						<!-- #ifdef MP-WEIXIN -->

						<view class="active" v-if="mallPayMode && mallPayMode.wechata.recharge == 1">
							<text class="icon-word" :style="activelabel"><text>余额</text></text>
							<text class="demon"><text>支持余额抵扣</text></text>
						</view>
						<!-- #endif -->
						<!-- #ifdef H5 -->

						<view class="active" v-if="mallPayMode && mallPayMode.wechat.recharge == 1">
							<text class="icon-word" :style="activelabel"><text>余额</text></text>
							<text class="demon"><text>支持余额抵扣</text></text>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<text class="iconfont el-sc-gengduo" style="color: rgb(150, 150, 150);"></text>
			</view>
			<view v-if="details && details.label" class="sale_item van-hairline--bottom" @click="showtype('service')">
				<view class="label" :style="titlestyle">服务</view>
				<view class="body">
					<view class="biaoqians">
						<view class="biaoqian" v-for="(item, i) in details.label" :key="i" v-if="i < 3">
							<text class="word">
								<text class="icon-m-yes1 iconfont el-sc-dui2" :style="'color:' + mydata.service.labelcolor"></text>
								<text :style="'color:' + mydata.service.textcolor">{{ item }}</text>
							</text>
						</view>
					</view>
				</view>
				<text class="iconfont el-sc-gengduo" style="color: rgb(150, 150, 150);"></text>
			</view>
			<view class="sale_item van-hairline--bottom">
				<view class="label" :style="titlestyle">不配送</view>
				<view class="body">
					<view class="common">
						<text class="words" v-if="details">{{ details.ft && details.ft.no_carry_value ? details.ft.no_carry_value : '无不配送区域' }}</text>
					</view>
				</view>
			</view>
		</view>

		<view></view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			list: [],
			showpop: false,
			show: false,
			mallPayMode: null
		};
	},

	computed: {
		titlestyle() {
			return 'color:' + this.mydata.color.title;
		},
		activelabel() {
			return 'color:' + this.mydata.active.labelcolor + '; border-color:' + this.mydata.active.labelcolor;
		},
		...mapState({
			addons: state => state.addons,
			details: state => state.details
		})
	},
	created() {
		this.getjuris('mallPayMode').then(a => {
			this.mallPayMode = a;
		});
	},

	methods: {
		showtype(type) {
			this.$emit('change', type);
		}
		//领取优惠券
	}
};
</script>

<style lang="scss" scoped>
.detail_sale {
	width: 100%;
	.containers {
		width: 100%;
		box-sizing: border-box;
		padding-left: 24rpx;
		margin: 0;
		.sale_item {
			display: flex;
			flex-wrap: nowrap;
			padding-right: 24rpx;
			.label {
				box-sizing: border-box;
				font-size: 24rpx;
				min-width: 96rpx;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				min-height: 80rpx;
				color: #969696;
			}
			.body {
				width: 0;
				flex: 1;
				font-size: 24rpx;
				line-height: 56rpx;
				display: flex;
				flex-direction: column;
				&.body-coupon {
					height: 80rpx;
					overflow: hidden;
				}
				.coupons {
					display: flex;
					flex-wrap: wrap;
					.coupon {
						height: 36rpx;
						line-height: 36rpx;
						margin: 22rpx 22rpx 22rpx 0;
						display: flex;
						flex-direction: column;
						font-size: 20rpx;
						color: #fff;
						text-align: center;
						padding: 0 16rpx;
						background: red;
						position: relative;
						border-top-left-radius: 4rpx;
						border-bottom-left-radius: 4rpx;
						.after {
							border-left: 2.5rpx dotted red;
							right: -2.5rpx;
							position: absolute;
							top: 0;
							bottom: 0;
							width: 0;
						}
					}
				}
				.actives {
					padding: 14rpx 0;
					.active {
						display: flex;
						flex-wrap: nowrap;
						i {
							font-style: normal;
						}
						.icon-word {
							font-size: 20rpx;
							height: 32rpx;
							line-height: 20rpx;
							display: flex;
							flex-shrink: 0;
							flex-direction: column;
							justify-content: center;
							border: 1rpx solid #ff3c29;
							color: #ff3c29;
							border-radius: 16rpx;
							padding: 6rpx 16rpx;
							margin: 8rpx 16rpx 8rpx 0;
						}
						.demon {
							line-height: 24rpx;
							font-size: 24rpx;
							margin: 8rpx 0;
							i {
								line-height: 24rpx;
								font-size: 24rpx;
							}
						}
					}
				}
				.biaoqians {
					display: flex;
					flex-wrap: wrap;
					.biaoqian {
						height: 80rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						text-align: center;
						font-size: 24rpx;
						font-weight: 500;
						margin-right: 24rpx;
						.word {
							display: flex;
							flex-wrap: nowrap;
							position: relative;
							font-size: 24rpx;
							align-items: center;
							.icon-m-yes1 {
								margin-right: 8rpx;
								font-size: 28rpx;
							}
						}
					}
				}
				.common {
					display: flex;
					line-height: 24rpx;
					font-size: 24rpx;
					margin: auto 0;
					.words {
						flex: 1;
						margin: auto 0;
						padding: 6rpx 0;
						font-weight: 500;
						font-size: 24rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.el-sc-gengduo {
			flex-shrink: 0;
			line-height: 32rpx;
			height: 32rpx;
			margin: auto 0 auto 1px;
			font-size: 32rpx;
			color: #969696;
		}
	}
}

.van-hairline--bottom {
	position: relative;
}
.van-hairline--bottom:after {
	content: ' ';
	position: absolute;
	pointer-events: none;
	box-sizing: border-box;
	transform-origin: center;
	top: -50%;
	left: -50%;
	right: -50%;
	bottom: -50%;
	transform: scale(0.5);
	border-width: 0 0 2rpx 0;
	border-bottom-color: #e6e7eb;
	border-style: solid;
}
.pup_title {
	text-align: center;
	margin-bottom: 20rpx;
	font-size: 36rpx;
	font-weight: bold;
}
.list {
	height: 50vh;
	.item {
		background: #fde2e2;
		height: 160rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		.price {
			width: 160rpx;
			height: 160rpx;
			justify-content: center;
			background: #ff3c29;
			color: #fff;
		}
		.content {
			width: 360rpx;
			padding-left: 20rpx;
			font-size: 24rpx;
			height: 80rpx;
			justify-content: space-between;
		}
		.btns {
			background-color: #ff3c29;
			color: #fff;
			width: 140rpx;
			font-size: 26rpx;
			text-align: center;
			padding: 10rpx 0;
			border-radius: 27rpx;
		}
	}
}
</style>
